<template>
  <div class="search_form_container">
    <el-form
      ref="publicSearchForm"
      :label-position="labelPosition"
      :model="formLabelAlign"
    >
      <el-row :gutter="20">
        <el-col v-for="formItem in searchFormAction" :key="formItem.prop" :span="formItem.span || 4">
          <el-form-item :label="formItem.label" :prop="formItem.prop" :label-width="formItem.l_weight">
            <template v-if="formItem.type === 'input'">
              <el-input v-model="formLabelAlign[formItem.prop]" :placeholder="'请输入' + formItem.label" />
            </template>
            <template v-if="formItem.type === 'select'">
              <el-select  v-model="formLabelAlign[formItem.prop]" :placeholder="'请输入' + formItem.label">
                <el-option
                  v-for="selectItem in formItem.dictData"
                  :key="selectItem.dictLabel"
                  :value="selectItem.dictData"
                  :label="selectItem.dictLabel"
                />
              </el-select>
            </template>
          </el-form-item>
        </el-col>
        <el-col class="flex_container" :span="4" style="margin-left: 10px;">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="submitSearchForm"
            >搜索</el-button>
            <el-button
              icon="el-icon-refresh"
              @click="resetForm('publicSearchForm')"
            >重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SearchForm',
  props: {
    searchFormAction: {
      type: Array,
      default: _ => []
    },
    labelPosition: {
      type: String,
      default: 'right'
    }
  },
  data() {
    return {
      formLabelAlign: {}
    }
  },
  created() {
    this.renderPages()
  },
  methods: {
    renderPages() {
      let searchFormAction = this.searchFormAction;
      let formLabelAlign = this.formLabelAlign;
      if (searchFormAction.length > 0) {
        for (let actionElement of searchFormAction) {
          formLabelAlign[actionElement.prop] = '';
        }
        this.$set(this, 'formLabelAlign', JSON.parse(JSON.stringify(formLabelAlign)));
      } else {
        console.log('请传入配置数据...');
      }
    },
    submitSearchForm() {
      this.$emit('search-submit', this.formLabelAlign)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="scss" scoped>
  .search_form_container {
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 5px;

    .el-form-item {
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
</style>
